<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查看图片</title>
	<style>
		.container {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			background: rgba(0,0,0,.5);
			z-index: 0;
			opacity: 1;
		}
		.container.hide {
			z-index: -1;
			opacity: 0;
		}
		.container img {
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
			width: 80%;
			margin: auto;
			cursor: zoom-out;
		}
		img {
			cursor: zoom-in;
		}
	</style>
</head>
<body>
<h1>优化后：减少dom操作重复利用div;多实用类，少用style减少渲染次数</h1>
<script>
		function show() {
			var imgsrc = event.target.src,
					wrapdiv = document.querySelector('.container');
			if(wrapdiv) {
				wrapdiv.classList.toggle('hide');
			} else {
				wrapdiv = document.createElement('div');
				wrapdiv.classList.add("container"); 
				document.body.appendChild(wrapdiv);
			}
			wrapdiv.innerHTML = '<img src="'+ imgsrc + '" onclick="hide()"/>';
		} 
		function hide() {
			event.target.parentNode.classList.toggle('hide');
		}
	</script>
	<img src="https://i.alipayobjects.com/i/localhost/png/201406/2pIJvEds0F.png" alt="" onclick="show()">
	<img src="http://news.xinhuanet.com/photo/2017-11/01/1121892078_15095404166521n.jpg" alt="" onclick="show()">
</body>
</html>